<template>
  <div>
    <div class="wel__header">
      <div class="wel__info">
        <img :src="userInfo.avatar"
             alt=""
             class="wel__info-img">
        <div class="wel__info-content">
          <div class="wel__info-title">
            {{$t('wel.info')}}
          </div>
          <div class="wel__info-subtitle">
            {{$t('wel.dept')}}
          </div>
        </div>
      </div>
      <div class="wel__extra">
        <div class="wel__extra-item">
          <p class="wel__extra-title">
            {{ $t('wel.count')}}
          </p>
          <p class="wel__extra-subtitle">
            56
          </p>
        </div>
        <!--<div class="wel__extra-item">
          <p class="wel__extra-title">
            {{ $t('wel.team')}}
          </p>
          <p class="wel__extra-subtitle">
            8 <span>/ 24</span>
          </p>
        </div>-->
        <div class="wel__extra-item">
          <p class="wel__extra-title">

            {{ $t('wel.project')}}
          </p>
          <p class="wel__extra-subtitle">
            2,223
          </p>
        </div>
      </div>
    </div>
    <basic-container>
      <avue-data-box :option="option1"></avue-data-box>
    </basic-container>

    <el-row :span="24">

      <el-col :span="18">
        <basic-container>
          <avue-data-progress :option="option3"
                              style="margin-bottom:42px"></avue-data-progress>
          <avue-data-tabs :option="option"></avue-data-tabs>
        </basic-container>
      </el-col>

      <el-col :span="6">
        <basic-container>
          <avue-data-icons :option="option2"></avue-data-icons>
        </basic-container>
      </el-col>

    </el-row>

    <el-row :span="24" >
      <el-col :span="8" >
        <basic-container>
          <avue-echart-bar ref="echart" :theme="theme6" :option="config6" :data="data6"  >
          </avue-echart-bar>
        </basic-container>
      </el-col>

      <el-col :span="8">
        <basic-container >
          <avue-echart-pie :theme="theme7" :option="option7" :data="data7"   >
          </avue-echart-pie>
        </basic-container>
      </el-col>

      <el-col :span="8">
        <basic-container>
          <avue-echart-gauge ref="echart" :theme="theme8" :option="config8" :data="data8" >
          </avue-echart-gauge>
        </basic-container>
      </el-col>


    </el-row>
  </div>
</template>

<script>
    import {mapGetters} from "vuex";

    let canvas;
    let ctx;

    export default {


   mounted() {
   this.initCanvas()
   },
  methods: {
  initCanvas() {
  console.log("初始化canvas")
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  this.drawSmile()
  },
  drawSmile() {
  ctx.beginPath();
  ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
  ctx.moveTo(110, 75);
  ctx.arc(75, 75, 35, 0, Math.PI, false); // 口(顺时针)
  ctx.moveTo(65, 65);
  ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
  ctx.moveTo(95, 65);
  ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼
  ctx.stroke();
  }
  },


        name: "wel",
        data() {
            return {
                theme8:'',
                data8: {
                    value: 50,
                    name: '完成率',
                    min: 0,
                    max: 100,
                    unit: '%'
                },
                config8: {
                    switchTheme:true,
                    lineSize: 20,
                    barColor: [{
                        postion: 0.2,
                        color1: '#91c7ae'
                    },
                        {
                            postion: 0.8,
                            color1: '#63869e'
                        },
                        {
                            postion: 1,
                            color1: '#c23531'
                        }
                    ]
                },

                theme7:'',
                data7: [
                    { value: 335, name: '直接访问' },
                    { value: 310, name: '邮件营销' },
                    { value: 234, name: '联盟广告' },
                    { value: 135, name: '视频广告' },
                    { value: 1548, name: '搜索引擎' }
                ],
                option7: {
                    title: {
                          text: "Customized Pie",
                          left: "center",
                          top: 20,
                          textStyle: {
                            color: "#ccc"
                          }
                        },

                    subtitle: '纯属虚构',
                    labelShow:true,
                    radius: "55%",
                    center: ["50%", "50%"],
                    "barColor": [
                        {
                            "color1": "#83bff6",
                        },
                        {
                            "color1": "#23B7E5",
                        },
                        {
                            "color1": "rgba(154, 168, 212, 1)",
                        },
                        {
                            "color1": "#188df0",
                        },
                        {
                            "color1": "#564AA3",
                        }
                    ],
                    itemStyle: {
                                  normal: {
                                    label: {
                                      show: true,//饼图上是否出现标注文字 标注各模块代表什么  默认是true
                                      // position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
                                    },
                                    labelLine: {
                                      show: true//官网demo里外部标注上的小细线的显示隐藏    默认显示
                                    }
                                  }
                                  }
                },


                theme6:'',
                data6: {
                    "categories": [
                        "北京",
                        "上海",
                        "杭州",
                        "深圳",
                        "杭州",
                        "深圳",
                        "广州",
                        "连云港"
                    ],
                    "series": [
                        {
                            "name": "手机品牌",
                            "data": [
                                1131776,
                                1349011,
                                905718,
                                1349011,
                                905718,
                                656020,
                                571234,
                                467397
                            ]
                        }, {
                            "name": "其他手机品牌",
                            "data": [
                                1131776,
                                1349011,
                                905718,
                                1349011,
                                905718,
                                656020,
                                571234,
                                467397
                            ]
                        }
                    ]
                },
                config6: {
                    switchTheme:true,
                    refreshTime: 5000,
                    title: '2019年度潍坊城市销售额排名',
                    titlePostion: '',
                    titleFontSize: 24,
                    titleColor: 'rgb(115, 170, 229)',
                    titleLink: "http://avuejs.com",
                    info: '这是图表的简介',
                    gridX: 105,
                    gridY: 50,
                    gridX2: 80,
                    gridY2: 100,
                    nameColor: '#333',
                    lineColor: '#333',
                    xNameFontSize: 16,
                    yNameFontSize: 16,
                    labelShow: false,
                    labelShowFontSize: 14,
                    labelShowFontWeight: 300,
                    yAxisInverse: false,
                    xAxisInverse: false,
                    xAxisShow: true,
                    yAxisShow: true,
                    xAxisSplitLineShow: false,
                    yAxisSplitLineShow: false,
                    refresh: 3000,
                    barWidth: 30,
                    barRadius: 8,
                    barColor: [{
                        color1: '#83bff6',
                        color2: '#188df0',
                        postion: 90
                    }, {
                        color1: '#23B7E5',
                        color2: '#564AA3',
                        postion: 50
                    }],
                    barMinHeight: 2,
                }
            }
        },
        computed: {
            ...mapGetters(["userInfo"]),
            option1() {
                return {
                    span: 6,
                    data: [
                        {
                            title: this.$t("wel.data4.column1"),
                            count: 12332,
                           icon: "el-icon-loading",

                            color: "rgb(49, 180, 141)",
                         /*   href: "https://avue.top",*/
                            target: "_blank"
                        },
                        {
                            title: this.$t("wel.data4.column2"),
                            count: 33,
                            icon: "el-icon-switch-button\n",
                            color: "rgb(56, 161, 242)",
                            /*href: "https://avue.top",*/
                            target: "_blank"
                        },
                        {
                            title: this.$t("wel.data4.column3"),
                            count: 2223,
                            icon: "el-icon-cpu",
                            color: "rgb(117, 56, 199)",
                          /*  href: "https://avue.top",*/
                            target: "_blank"
                        },
                        {
                            title: this.$t("wel.data4.column4"),
                            count: 2223,
                            icon: "el-icon-pie-chart",
                            color: "rgb(230, 71, 88)",
                           /* href: "https://avue.top",*/
                            target: "_blank"
                        }
                    ]
                };
            },
            option3() {
                return {
                    span: 8,
                    data: [
                        {
                            title: this.$t("wel.data3.column1"),
                            color: "rgb(178, 159, 255)",
                            count: 32,
                           /* href: "https://avue.top",*/
                            target: "_blank"
                        },
                        {
                            title: this.$t("wel.data3.column2"),
                            color: "rgb(230, 71, 88)",
                            count: 32,
                           /* href: "https://avue.top",*/
                            target: "_blank"
                        },
                        {
                            title: this.$t("wel.data3.column3"),
                            color: "rgb(230, 71, 88)",
                            count: 32,
                            /*href: "https://avue.top",*/
                            target: "_blank"
                        }
                    ]
                };
            },
            option2() {
                return {
                    span: 12,
                    data: [
                        {
                            title: this.$t("wel.data2.column1"),
                            count: 12678,
                            icon: "el-icon-tickets",
                          /*  href: "https://avue.top",*/
                            target: "_blank"
                        },
                        {
                            title: this.$t("wel.data2.column2"),
                            count: 22139,
                            icon: "el-icon-success",
                            /*href: "https://avue.top",*/
                            target: "_blank"
                        },
                        {
                            title: this.$t("wel.data2.column3"),
                            count: 35623,
                            icon: "el-icon-sunny",
                       /*     href: "https://avue.top",*/
                            target: "_blank"
                        },
                        {
                            title: this.$t("wel.data2.column4"),
                            count: 16826,
                            icon: "el-icon-full-screen",
                           /* href: "https://avue.top",*/
                            target: "_blank"
                        }
                    ]
                };
            },
            option() {
                return {
                    span: 8,
                    data: [
                        {
                            title: this.$t("wel.data.column1"),
                            subtitle: this.$t("wel.data.subtitle"),
                            count: 7993,
                          /*  allcount: 10222,*/
                            text: this.$t("wel.data.text1"),
                            color: "rgb(27, 201, 142)",
                            key: this.$t("wel.data.key1")
                        },
                        {
                            title: this.$t("wel.data.column2"),
                            subtitle: this.$t("wel.data.subtitle"),
                            count: 3112,
                            /*allcount: 10222,*/
                            text: this.$t("wel.data.text2"),
                            color: "rgb(230, 71, 88)",
                            key: this.$t("wel.data.key2")
                        },
                        {
                            title: this.$t("wel.data.column3"),
                            subtitle: this.$t("wel.data.subtitle"),
                            count: 908,
                          /*  allcount: 10222,*/
                            text: this.$t("wel.data.text3"),
                            color: "rgb(56, 161, 242)",
                            key: this.$t("wel.data.key3")
                        }
                    ]
                };
            },
        },
        created() {
        },
        methods: {}
    };


</script>

<style scoped="scoped" lang="scss">

   .avue-echart{
    width: 400px;
    height: 400px;
    margin: auto;
    text-align: center;
   }


  .wel {
    &__header {
      padding: 25px 40px;
      border-bottom: 1px solid #e8e8e8;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    &__info {
      display: flex;
      align-items: center;

      &-img {
        border-radius: 72px;
        display: block;
        width: 72px;
        height: 72px;

        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }

      &-content {
        position: relative;
        margin-left: 24px;
        color: rgba(0, 0, 0, 0.45);
        line-height: 22px;
      }

      &-title {
        font-size: 20px;
        line-height: 28px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        margin-bottom: 12px;
      }

      &-subtitle {
        position: relative;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.45);
        line-height: 22px;
      }
    }

    &__extra {
      &-item {
        position: relative;
        padding: 0 32px;
        display: inline-block;

        &:last-child {
          &::after {
            display: none;
          }
        }

        &:after {
          background-color: #e8e8e8;
          position: absolute;
          top: 30px;
          right: 0;
          width: 1px;
          height: 40px;
          content: "";
        }
      }

      &-title {
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 4px;
      }

      &-subtitle {
        color: rgba(0, 0, 0, 0.85);
        font-size: 30px;
        line-height: 38px;
        margin: 0;

        span {
          color: rgba(0, 0, 0, 0.45);
          font-size: 20px;
        }
      }
    }
  }




</style>
